<!-- From Uiverse.io by YUGE0  - Tags: button -->
<button
  class="cursor-pointer p-2 px-5 text-white rounded-lg shadow-lg shadow-black bg-gradient-to-b from-[#c654ff] to-[#b319ff] hover:shadow-inner hover:shadow-black hover:bg-[#b319ff]"
>
  <div class="flex justify-around align-baseline">
    <h1 class="px-2 text-xl">Join Today</h1>
    <svg
      stroke-width="22.016"
      transform="rotate(0)"
      stroke="#ffffff"
      xml:space="preserve"
      viewBox="180 -220 100 800"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      id="Layer_1"
      version="1.1"
      width="25px"
      height="25px"
      fill="#ffffff"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-width="2.048"
        stroke="#CCCCCC"
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <g>
          <g>
            <path
              d="M388.418,240.915L153.752,6.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17L343.163,256 L123.582,475.582c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l234.667-234.667 C396.749,262.754,396.749,249.246,388.418,240.915z"
            ></path>
          </g>
        </g>
      </g>
    </svg>
  </div>
</button>


    